<template>
  <div class="question-wrapper" :class="[classType[qType]]">
    <div class="question-header">
      <div class="stem">
        <div class="index">{{ `${topicIndex + 1}、` }}</div>
        <div class="subject">
          <div class="type-text">{{ question.question_type_text }}</div>
          <div class="title" v-html="question.title"></div>
        </div>
      </div>
      <template v-if="!$util.isEmpty(question.material)">
        <div class="question-player">
          <div
            class="item"
            :class="material.type"
            v-for="(material, index) in question.material"
            :key="index"
          >
            <BaseAudio
              :fileurl="material.src"
              :index="index"
              :topicIndex="topicIndex"
              :uniIndex="`play_${question.id}_${index}`"
              v-if="material.type === 'audio'"
            ></BaseAudio>
            <BaseVideo
              v-if="material.type === 'video'"
              :fileurl="material.src"
              :topicIndex="topicIndex"
              :uniIndex="`play_${question.id}_${index}`"
            ></BaseVideo>
          </div>
        </div>
      </template>
      <div class="collection" @click="onCollected">
        <i :class="collected == 1 ? 'edu-icon-shoucang1' : 'edu-icon-collect'"></i>
      </div>
      <div class="stamp" v-if="is_answered">
        <el-image
          style="width: 40px; height: 40px"
          :src="
            require(`@/assets/images/exam/${
              topicIsright == 1 ? 'exam_correct_icon' : 'exam_fault_icon'
            }.png`)
          "
        ></el-image>
      </div>
    </div>
    <!-- 单选/判断 -->
    <div class="question-body" v-if="$util.inArray(qType, [1, 2])">
      <el-radio-group
        v-model="current_field.radio"
        @change="handleChange($event, question)"
        :disabled="is_answered"
      >
        <el-radio :label="item.id" v-for="item in question.options" :key="item.id">
          <span class="key">{{ `${item.key}.` }}</span>
          <div v-html="item.value" class="content"></div>
        </el-radio>
      </el-radio-group>
    </div>
    <!-- 多选 -->
    <div class="question-body" v-else-if="$util.inArray(qType, [3, 4])">
      <el-checkbox-group
        v-model="current_field.checkList"
        @change="handleChange($event, question)"
        :disabled="is_answered"
      >
        <el-checkbox :label="item.id" v-for="item in question.options" :key="item.id">
          <span class="key">{{ `${item.key}.` }}</span>
          <div v-html="item.value" class="content"></div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- 完形填空 -->
    <div class="question-body" v-else-if="qType == 7">
      <div class="protype-item" v-for="(topic, index) in question.topics" :key="index">
        <span class="protype-index">{{ `${index + 1}.` }}</span>
        <el-radio-group
          v-model="current_field.checkList[index]"
          :disabled="is_answered"
          @change="handleChange($event, topic)"
        >
          <el-radio :label="item.id" v-for="item in topic.options" :key="item.id">
            <span class="key">{{ `${item.key}.` }}</span>
            <div v-html="item.value" class="content"></div>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 解析 -->
    <Parsing v-if="is_answered" :parsing_data="parsing_data"></Parsing>
  </div>
</template>

<script>
import Parsing from './parsing'
import BaseAudio from './baseAudio'
import BaseVideo from './baseVideo'
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'Question',
  components: {
    Parsing,
    BaseAudio,
    BaseVideo
  },
  props: {
    // 试题数据
    question: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 试题的类型
    qType: {
      type: Number,
      default: 0
    },
    is_answered: {
      type: Boolean,
      default: false
    },
    collected: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      classType: {
        1: 'question-radio',
        2: 'question-radio',
        3: 'question-select',
        4: 'question-select',
        5: 'question-filling',
        6: 'question-answer',
        7: 'question-protype',
        8: 'question-material'
      },
      current_field: { radio: '', checkList: [] }
    }
  },
  computed: {
    ...mapState({
      topicIndex: state => state.exercise.topic_index,
      correctAnswer: state => state.exercise.topic_correct_answer_key,
      topicIsright: state => state.exercise.topic_is_right,
      examAnswer: state => state.exercise.topic_rules,
      topicId: state => state.exercise.topic_id
    }),
    ...mapGetters({
      topicAnswer: 'exercise/topicAnswer'
    }),
    // 解析的数据
    parsing_data() {
      return {
        points: this.question.points,
        answer: this.correctAnswer,
        analyze: this.question.analyze
      }
    }
  },
  created() {
    this.getTopicAnswer()
  },
  methods: {
    // 获取试题的答案
    getTopicAnswer() {
      const _this = this
      if (_this.$util.inArray(_this.qType, [1, 2])) {
        if (_this.$util.isEmpty(_this.topicAnswer.answer_data)) {
          this.current_field.radio = ''
        } else {
          _this.current_field.radio = _this.topicAnswer.answer_data[0]
        }
      } else if (_this.$util.inArray(_this.qType, [3, 4])) {
        _this.current_field.checkList = _this.topicAnswer.answer_data
      } else if (_this.qType == 7) {
        if (_this.$util.isEmpty(_this.topicAnswer.answer_data)) {
          _this.question.topics.forEach((topic, index) => {
            _this.current_field.checkList[index] = ''
          })
        } else {
          _this.question.topics.forEach((topic, index) => {
            let answerData = _this.topicAnswer.answer_data.find(j => j.id == topic.id)
            if (_this.$util.isEmpty(answerData)) {
              _this.current_field.checkList[index] = ''
            } else {
              _this.current_field.checkList[index] = answerData.answer[0]
            }
          })
        }
      }
    },
    handleChange(value, question) {
      const _this = this
      let answer
      if (this.qType === 7) {
        answer = _this.topicAnswer.answer_data
        if (_this.$util.isEmpty(answer)) {
          _this.question.topics.forEach(topic => {
            answer.push({
              id: topic.id,
              answer: []
            })
          })
        }
        answer.forEach(item => {
          if (item.id == question.id) {
            item.id = question.id
            item.answer = [value]
          }
        })
      } else if (_this.$util.inArray(_this.qType, [1, 2])) {
        answer = [value]
      } else {
        answer = value
      }
      _this.$store.commit('exercise/SET_POINT_CURRENT_CHOOSE_ANSWER', {
        answer_data: answer
      })
    },
    // 收藏
    onCollected() {
      this.$emit('collected')
    }
  },
  destroyed() {
    // 销毁页面
    this.$store.commit('examPaly/SET_PALY_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.question-wrapper {
  padding: 15px 0;
  position: relative;
  .question-border {
    border-bottom: 1px solid $border-color-divider;
  }
  .question-header {
    .stem {
      display: flex;
      align-items: flex-start;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      line-height: 20px;
      .subject {
        flex: 1;
        @include clearfix();
        .type-text {
          float: left;
          font-size: 12px;
          color: #ffffff;
          padding: 2px 5px;
          border-radius: 2px;
          line-height: 1;
          margin-top: 2px;
          @include edu-color-primary(background-color);
        }
        .score {
          float: left;
          margin: 0 5px;
        }
        .title {
          ::v-deep * {
            padding: 0;
            margin: 0;
          }
        }
      }
    }
    .collection {
      font-size: 18px;
      position: absolute;
      right: 0;
      top: 15px;
      cursor: pointer;
      .edu-icon-shoucang1 {
        color: $text-color-other;
      }
      .edu-icon-collect {
        color: $text-color-auxiliary;
      }
    }
    .stamp {
      position: absolute;
      right: 32px;
      top: 15px;
    }
    .question-player {
      display: flex;
      flex-wrap: wrap;
      .item {
        &.video {
          width: calc(50% - 10px);
          margin-top: 15px;
        }
        &.video:nth-child(odd) {
          margin-right: 20px;
        }
        &.audio {
          width: 100%;
          margin-top: 15px;
        }
      }
    }
  }
}
// 单选
.question-radio {
  padding-right: 60px;
  .question-body {
    margin-top: 3px;
    .el-radio-group {
      display: flex;
      flex-direction: column;
    }
    .el-radio {
      display: flex;
      align-items: flex-start;
      margin-right: 0;
      white-space: normal;
      margin-top: 12px;
      color: $text-color-import;
      ::v-deep .el-radio__input.is-checked + .el-radio__label {
        color: $text-color-import;
      }
      ::v-deep .el-radio__label {
        display: flex;
        align-items: flex-start;
        @include clearfix();
      }
      .key {
        float: left;
      }
      .content ::v-deep * {
        margin: 0;
        padding: 0;
      }
      .content {
        ::v-deep img {
          max-width: 100%;
        }
      }
      ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
        color: $text-color-import;
      }
      ::v-deep .el-radio__input.is-disabled .el-radio__inner {
        border-color: #dcdfe6;
        background-color: #ffffff;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
        @include edu-color-primary(background-color);
        @include edu-color-primary(border-color);
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
        background-color: #ffffff;
      }
    }
  }
}
// 多选
.question-select {
  padding-right: 60px;
  .question-body {
    margin-top: 3px;
    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
    ::v-deep .el-checkbox__input {
      margin-top: 3px;
    }
    .el-checkbox {
      display: flex;
      align-items: flex-start;
      margin-right: 0;
      white-space: normal;
      margin-top: 12px;
      color: $text-color-import;
      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: $text-color-import;
      }
      ::v-deep .el-checkbox__label {
        display: flex;
        align-items: flex-start;
        @include clearfix();
      }
      .key {
        float: left;
      }
      .content ::v-deep * {
        margin: 0;
        padding: 0;
      }
      .content {
        ::v-deep img {
          max-width: 100%;
        }
      }
      ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
        background-color: #ffffff;
        border-color: #dcdfe6;
      }
      ::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
        color: $text-color-import;
      }
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        @include edu-color-primary(background-color);
        @include edu-color-primary(border-color);
      }
      ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner::after {
        border-color: #ffffff;
      }
    }
  }
}
// 填空
.question-filling {
  padding-right: 60px;
  .question-body {
    margin-top: 5px;
    flex-wrap: wrap;
    .filling-item {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .filling-index {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-import;
        margin-right: 5px;
      }
      .filling-input {
        font-size: 12px;
        font-weight: 400;
        ::v-deep .el-input__inner {
          border-radius: 0;
          border: none;
          color: $text-color-import;
          border-bottom: 1px solid #606266;
          padding: 0;
        }
      }
    }
  }
}
// 解答
.question-answer {
  padding-right: 60px;
  .question-body {
    margin-top: 15px;
    ::v-deep .el-textarea__inner {
      border-radius: 0;
      border: 1px solid #606266;
    }
  }
}
// 完型填空
.question-protype {
  padding-right: 60px;
  & > .question-body {
    padding-left: 20px;
  }
  .question-body {
    margin-top: 5px;
    .protype-item {
      display: flex;
      align-items: flex-start;
      .protype-index {
        font-size: 12px;
        font-weight: 400;
        color: #303133;
        margin-right: 5px;
        margin-top: 11px;
      }
      .el-radio-group {
        display: flex;
        flex-wrap: wrap;
      }
      .el-radio {
        display: flex;
        margin-top: 10px;
        color: $text-color-import;
        ::v-deep .el-radio__input.is-checked + .el-radio__label {
          color: $text-color-import;
        }
        ::v-deep .el-radio__label {
          font-size: 12px;
          display: flex;
          align-items: flex-start;
          @include clearfix();
        }
        .key {
          float: left;
        }
        .content ::v-deep * {
          margin: 0;
          padding: 0;
        }
        .content {
          ::v-deep img {
            max-width: 100%;
          }
        }
        ::v-deep .el-radio__input.is-disabled + span.el-radio__label {
          color: $text-color-import;
        }
        ::v-deep .el-radio__input.is-disabled .el-radio__inner {
          border-color: #dcdfe6;
          background-color: #ffffff;
        }
        ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
          @include edu-color-primary(background-color);
          @include edu-color-primary(border-color);
        }
        ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
          background-color: #ffffff;
        }
      }
    }
  }
}
// 材料
.question-material {
  & > .question-header {
    padding-right: 60px;
  }
  & > .question-body {
    padding-left: 20px;
  }
  .question-radio,
  .question-select,
  .question-filling,
  .question-answer,
  .question-protype {
    .question-header .stem {
      display: block;
    }
    .question-header .stem .index {
      float: left;
    }
  }
}
</style>
